兼容性

2018年8月19日 更新——-
display: contents to the rescue

With display: contents, we can have our markup and our grid placement. This property makes the element so that it no longer seems to exist. It does not generate a box, so backgrounds, borders and other box-related properties will no longer work on it. Grid placement properties will also no longer work. But all of these things will work for the element’s children. The spec says the element behaves ‘as if it had been replaced […] by its contents’. If that sounds weird, I can recommend Ire Aderinokun’s detailed explainer.

意思就是 ul是li的markup ，但是我不想用div来包裹，我更愿意用li(li的好处是浏览器的阅读模式it will stay a list outside the context of our page, for example in Safari Reader mode, it will show as a list)
然后设置ul为 display:content 这样就OK了 li就成为grid-item了。
但是display:content 在firefox 62中 只是stept five。
detal info: link
Jen simmon